<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface User {
  id: number
  name: string
  role: string
  status: 'active' | 'inactive'
}

const users = ref<User[]>([
  { id: 1, name: '张三', role: 'admin', status: 'active' },
  { id: 2, name: '李四', role: 'user', status: 'active' },
  { id: 3, name: '王五', role: 'user', status: 'inactive' },
  { id: 4, name: '赵六', role: 'user', status: 'active' },
])

onMounted(() => {
  // 检查是否是管理员
  const userRole = sessionStorage.getItem('userRole')
  if (userRole !== 'admin') {
    router.push('/404')
  }
})

function goBack() {
  router.push('/admin')
}

function toggleStatus(user: User) {
  user.status = user.status === 'active' ? 'inactive' : 'active'
}
</script>

<template>
  <div class="user-management">
    <header class="header">
      <button @click="goBack" class="back-btn">返回</button>
      <h1>用户管理</h1>
    </header>
    
    <div class="content">
      <div class="table-container">
        <table class="users-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>用户名</th>
              <th>角色</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.name }}</td>
              <td>
                <span class="role-tag" :class="{ admin: user.role === 'admin' }">
                  {{ user.role === 'admin' ? '管理员' : '普通用户' }}
                </span>
              </td>
              <td>
                <span class="status-indicator" :class="user.status"></span>
                {{ user.status === 'active' ? '启用' : '禁用' }}
              </td>
              <td>
                <button @click="toggleStatus(user)" class="action-btn">
                  {{ user.status === 'active' ? '禁用' : '启用' }}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-management {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.header {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #42b883;
  color: white;
}

.back-btn {
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid white;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 1rem;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.content {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th,
.users-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.users-table th {
  background-color: #f9f9f9;
  font-weight: 600;
}

.role-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #e1e1e1;
  border-radius: 50px;
  font-size: 0.875rem;
}

.role-tag.admin {
  background-color: #42b883;
  color: white;
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.status-indicator.active {
  background-color: #42b883;
}

.status-indicator.inactive {
  background-color: #ff7875;
}

.action-btn {
  padding: 0.25rem 0.75rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  border-color: #42b883;
  color: #42b883;
}
</style> 